<template>
  <div class="app-container" style="height: 100%">
    <div v-loading="loading" class="app-container-inner" element-loading-text="加载中...">
      <div style="display: flex; flex-direction: column; height: 100%">
        <div class="title_header">
          <div class="line"></div>
          <h4 class="text">结算设置</h4>
        </div>
        <div class="line_"></div>
        <el-form
          ref="inviteCodeForm"
          class="box-content"
          :model="withdrawSetVo"
          label-position="left"
          @submit.prevent="() => {}"
        >
          <div class="form">
            <div class="item_box">
              <el-form-item class="form_item" label-width="336">
                <template #label>
                  <div class="form_item_label">
                    <span class="name">开启工单结算</span>
                    <span class="tips">
                      <span>开启后：支持结算；关闭后：不支持结算，不显示结算功能；</span>
                    </span>
                  </div>
                </template>
                <div class="form_item_content">
                  <el-switch v-model="withdrawSetVo.enableOrderWithdraw" />
                  <span v-if="withdrawSetVo.enableOrderWithdraw">开启</span>
                  <span v-else>关闭</span>
                </div>
              </el-form-item>
              <el-form-item class="form_item" label-width="336">
                <template #label>
                  <div class="form_item_label">
                    <span class="name">结算审核</span>
                    <span class="tips">开启后，结算需要审核；关闭后，结算申请直接通过；</span>
                  </div>
                </template>
                <div class="form_item_content">
                  <div style="display: flex; align-items: center; gap: 5px">
                    <el-switch v-model="withdrawSetVo.enableWithdrawCheck" />
                    <span v-if="withdrawSetVo.enableWithdrawCheck">开启</span>
                    <span v-else>关闭</span>
                  </div>
                </div>
              </el-form-item>
            </div>
            <div class="item_box">
              <el-form-item class="form_item" label-width="168">
                <template #label>
                  <div class="form_item_label">
                    <span class="name">结算冻结期</span>
                    <span class="tips">设置工单完成后多久可以结算</span>
                  </div>
                </template>
                <div class="form_item_content">
                  <div style="display: flex; align-items: center; gap: 5px">
                    <el-input
                      v-model.trim="withdrawSetVo.withdrawFreezeDay"
                      placeholder="请输入天数"
                      type="number"
                      step="1"
                      @input="
                        withdrawSetVo.withdrawFreezeDay = setInputValue(
                          withdrawSetVo.withdrawFreezeDay,
                          0,
                        )
                      "
                    >
                      <template #append>天</template>
                    </el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item class="form_item" label-width="168">
                <template #label>
                  <div class="form_item_label">
                    <span class="name">最低结算金额</span>
                    <span class="tips">设置最低结算金额</span>
                  </div>
                </template>
                <div class="form_item_content">
                  <div style="display: flex; align-items: center; gap: 5px">
                    <el-input
                      v-model.trim="withdrawSetVo.minWithdrawMoney"
                      placeholder="请输入金额"
                      type="number"
                      step="1"
                      @input="
                        withdrawSetVo.minWithdrawMoney = setInputValue(
                          withdrawSetVo.minWithdrawMoney,
                          0,
                        )
                      "
                    >
                      <template #append>元</template>
                    </el-input>
                  </div>
                </div>
              </el-form-item>
            </div>
            <div class="item_box">
              <el-form-item class="form_item" label-width="156">
                <template #label>
                  <div class="form_item_label">
                    <span class="name">每月结算次数</span>
                    <span class="tips">设置每月最多可结算的次数</span>
                  </div>
                </template>
                <div class="form_item_content">
                  <div style="display: flex; align-items: center; gap: 5px">
                    <el-input
                      v-model.trim="withdrawSetVo.monthWithdrawQty"
                      placeholder="请输入次数"
                      type="number"
                      step="1"
                      @input="
                        withdrawSetVo.monthWithdrawQty = setInputValue(
                          withdrawSetVo.monthWithdrawQty,
                          0,
                        )
                      "
                    >
                      <template #append>次</template>
                    </el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item class="form_item" label-width="156">
                <template #label>
                  <div class="form_item_label">
                    <span class="name">审核权限</span>
                    <span class="tips">有权审核结算的人</span>
                  </div>
                </template>
                <div class="form_item_content">
                  <div style="display: flex; align-items: center; gap: 5px">
                    <el-select
                      v-model="withdrawSetVo.empIds"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      placeholder="请选择"
                      :filter-method="searchEmpSelect"
                      filterable
                      fit-input-width
                      remote-show-suffix
                      style="width: 190px"
                    >
                      <el-option
                        v-for="item in customersData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div class="btn-group">
          <HButton is-modal type="primary" @click="saveWithdrawSetFu()">保存</HButton>
          <h-button is-modal @click="onCancel">取消</h-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import setInputValue from '@/utils/money'
  import { empPageSelecct } from '@/api/organize'
  import { getWithdrawSet, saveWithdrawSet } from '@/api/withdrawal'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { markRaw } from 'vue'
  import { CircleCloseFilled } from '@element-plus/icons-vue'
  import _ from 'lodash'
  import routeComponentName from '@/config/route-component-name'
  import { useRoute, useRouter } from 'vue-router'
  import { useTagsViewStore } from '@/store/modules/tagsView'

  defineOptions({
    name: routeComponentName.financialSettlement.settlementSet,
  })

  // 全局路由对象
  const router = useRouter()

  // 激活路由对象
  const route = useRoute()

  // 标签状态管理
  const tagsViewStore = useTagsViewStore()

  const loading = ref(false)
  const withdrawSetVo = ref({
    empIds: [], //提现审核人员ID，当enableWithdrawCheck=true时，该字段必填
    enableOrderWithdraw: true, //是否开启工单提现功能：false-关闭，true-开启,示例值(true)
    enableWithdrawCheck: true, //是否开启提现审核：false-关闭，true-开启,示例值(true)
    id: 0, //提现ID，修改必传
    minWithdrawMoney: 100, //最低提现金额,示例值(100)
    monthWithdrawQty: 10, //每月提现次数,示例值(10)
    withdrawFreezeDay: 7, //提现冻结期,示例值(7)
  })
  // 使用 ref 来缓存客服数据
  const customersData = ref([])

  // 获取客服
  const getworkTeamPageSelect = (val) => {
    let data = {
      limit: 0,
      name: val,
      page: 0,
    }
    empPageSelecct(data).then((res) => {
      if (res.data.success) {
        customersData.value = res.data.data.rows
      }
    })
  }
  // 搜索职员下拉数据
  const empVal = ref('')
  const searchEmpSelect = _.throttle((query: string) => {
    if (empVal.value !== query) {
      empVal.value = query
      getworkTeamPageSelect(empVal.value)
    }
  }, 500)
  // 获取详情
  const getWithdrawSetFu = () => {
    getWithdrawSet().then((res) => {
      if (res.data.success) {
        withdrawSetVo.value = { ...res.data.data.row }
      } else {
        ElMessageBox.confirm(res.data.message, '提示', {
          type: 'error',
          icon: markRaw(CircleCloseFilled),
          showCancelButton: false,
        })
      }
    })
  }
  // 保存
  const saveWithdrawSetFu = () => {
    if (withdrawSetVo.value.enableWithdrawCheck && withdrawSetVo.value.empIds.length == 0) {
      ElMessageBox.confirm('请选择有权审核结算的人', '提示', {
        type: 'error',
        icon: markRaw(CircleCloseFilled),
        showCancelButton: false,
      })
      return
    }
    loading.value = true
    saveWithdrawSet(withdrawSetVo.value).then((res) => {
      loading.value = false
      if (res.data.code == 20000) {
        ElMessage({
          showClose: true,
          message: res.data.message,
          duration: 3000,
          type: 'success',
          plain: true,
        })
      } else if (!res.data.success) {
        ElMessageBox.confirm(res.data.message, '提示', {
          type: 'error',
          icon: markRaw(CircleCloseFilled),
          showCancelButton: false,
        })
      }
      // if (res.data.success) {
      //     getWithdrawSetFu()
      // }
    })
  }

  /**
   * 取消事件
   */
  const onCancel = () => {
    tagsViewStore.delView(route.path)
    router.push('/withdrawal/list')
  }

  onMounted(() => {
    loading.value = true
    Promise.all([getworkTeamPageSelect(''), getWithdrawSetFu()]).then(() => {
      loading.value = false
    })
  })
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
